<html>
<head>
<title>RChart, User Guide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" leftmargin="35">
<h3>RCHART, User Guide</h3>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><i>Copyright 2005, J4L 
  Components (http://www.java4less.com)</i></font> <br>
  <a href="tutorialcontents.html">Go bak to contents</a></p>
<hr>
<h3>Interactive features</h3>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#0">Zoom and 
    scroll</a></font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#3">Chart Listener 
    </a></font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#1">Tips</a></font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#3">Actions 
    and Drill down charts</a><br>
    </font></li>
</ul>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="0"></a>Zoom and 
  Scroll</font></h4>
<font face="Arial, Helvetica, sans-serif" size="-1">Zoom and scroll are implemented 
by the ChartViewer class. The following properties must be used to enable zoom 
and scrollbars:</font> 
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">chart.virtualWidth (CHART_WIDTH 
    parameter)): width of the chart (in pixels). The horizontal scroll bar will 
    be enabled if the chart is wider than the available space (control's size). 
    </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">chart.virtualHeight 
    (CHART_HEIGHT parameter) : height of the chart (in pixels). The vertical scroll 
    bar will be enabled if the chart is higher than the available space (control's 
    size). </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">chartViewer.allowZoom: 
    if TRUE the +/- zoom buttons will be made visible. </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">chartViewer.maxZoom: 
    maximum zoom in %. The default is 200. </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">chartViewer.minZoom: 
    minimum zoom in %. The default is 50. </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">chartViewer.zoomIncrement: 
    zoom increment in % for the +/- buttons. The default is 25. </font><font face="Arial, Helvetica, sans-serif" size="-1"><br>
    <br>
    </font></li>
</ul>
<table width="100%" border="0" height="107">
  <tr> 
    <td width="17%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="61%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="17%" valign="top" height="266"> 
      <p>&nbsp;</p>
    </td>
    <td width="22%" valign="top" height="266"> 
      <p><font color="#3333FF">Size of the control<br>
        <br>
        Size of the chart<br>
        <br>
        Activate zoom<br>
        Configurate zoom</font></p>
    </td>
    <td width="61%" valign="top" height="266"> 
      <div align="left"> 
        <p>......<br>
          ChartLoader cloader=new ChartLoader();<br>
          cloader.loadFromFile(&quot;examples\\areaChart.txt&quot;,false);<br>
          Chart chart=cloader.build(false,false);<br>
          <br>
          // example of SWT Chart Viewer, AWT works the same way<br>
          ChartViewer chartViewer=new ChartViewer(shell,SWT.NONE); <br>
          chartViewer.setBounds(0,0,400,400); // size of the control is 400 x 
          400 <br>
          chart.virtualHeight=700;<br>
          chart.virtualWidth=700; // size of the chart is 700 x 700, scroll bars 
          will be enabled<br>
          chartViewer.allowZoom=true; // display zoom buttons<br>
          chartViewer.setChart(chart);<br>
          <br>
          ...... </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/zoom1.png" width="306" height="305"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">After you press the zoom 
  out (-) button the result is:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/zoom2.png" width="302" height="304"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If you want to disable 
  the zoom buttons you must use the following parameter:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">chartViewer.allowZoom=false;</font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/zoom3.png" width="309" height="309"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><br>
  </font></p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="3"></a>Chart 
  Listener</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">This section describes 
  how to use the com.java4less.rchart.ChartListener to capture events triggered 
  by RChart. Some of events are cacthed and processed by the ChartViewer and you 
  will rarely used them.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">You can either implement 
  the ChartListener inteface or use the ChartAdapter class to create your own 
  listener using the following code:</font></p>
<blockquote> 
  <p><font face="Courier New, Courier, mono" size="-1">chart.activateSelection=true; 
    // <br>
    chart.addChartListener( new ChartAdapter() {<br>
    public void chartEvent(Chart chart,int type) { <br>
    // process event here<br>
    if (type==ChartListener.EVENT_POINT_CLICKED) <br>
    System.out.println(&quot;Point clicked &quot; + chart.selectedSerie.name + 
    &quot; &quot;+ chart.selectedSeriePoint);<br>
    <br>
    }<br>
    </font><font face="Courier New, Courier, mono" size="-1">});</font></p>
  </blockquote>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The example above will 
  detect when a value has been clicked on the chart and will prints its value. 
  Note that you must set:<br>
  </font></p>
<blockquote>
  <p><font face="Arial, Helvetica, sans-serif" size="-1"><font face="Courier New, Courier, mono">chartViewer.activateSelection=true;</font></font></p>
</blockquote>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If you also want the cursor 
  to change when the mouse is over a point use this code:</font></p>
<blockquote> 
  <p><font face="Arial, Helvetica, sans-serif" size="-1"> <font face="Courier New, Courier, mono">chartViewer.changePointer=true;</font></font></p>
</blockquote>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><br>
  <br>
  The events processed by the ChartViewer are:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"> EVENT_AFTER_UPDATE: 
    when using realtime updates, the viewer will repaint the chart after each 
    update.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"> EVENT_TIP_UPDATE: when 
    displaying tips, the viewer will refresh the chart each time the tip has changed.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"> EVENT_ENTER_POINT and 
    EVENT_LEAVE_POINT: the viewer will change the cursor if the cursor is on a 
    chart's value point or bar.</font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Other events are:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">EVENT_POINT_CLICKED: 
    triggered when the user clicks on a chart value.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">paintUserExit(Chart 
    c,ChartGraphics g) method in the ChartListener interface can be used to paint 
    anything on the chart's graphic context.</font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The following properties 
  of the chart are normally used for the event processing:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">chart.selectedSerie: 
    the selected DataSerie (entered or clicked) , if any.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"> chart.selectedSeriePoint: 
    selected point or bar (0=first value of the serie, 1=second value and so on).</font></li>
</ul>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="1"></a>Tips</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If you want to display 
  tips when the mouse is placed over a bar, point or item you can use these parameters:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">CHART_SHOW_TIPS. Set 
    it to &quot;true&quot; in order to activate tips. </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">SERIE_TIPS_*: list of 
    tips for the values of the serie. For example, if serie 1 has 3 bars: </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">SERIE_TIPS_1=tip for 
    first bar|tip for second bar| tip for third bar</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">SERE_POINT_1=true. Linecharts 
    require the points to be active.</font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">you can use &quot;\n&quot; 
  in order to create multiline tips.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Use the following parameters 
  to change the look of the tips:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">CHART_TIPS_COLOR: background 
    color of the tips. </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">CHART_TIPS_FONT_COLOR 
    : font color. </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">CHART_TIPS_FONT: font 
    of the tips. </font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">if you also want to display 
  the current position (Y axis value) of the cursor you can use:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">CHART_SHOW_POSITION=true</font></p>
<table width="100%" border="0" height="107">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="184"> 
      <p>CHART_SHOW_TIPS=TRUE <br>
        CHART_TIPS_COLOR=0xffffff <br>
        CHART_TIPS_FONT_COLOR=0x404040 <br>
        CHART_TIPS_FONT=SansSerif|ITALIC|10 <br>
        SERIE_TIPS_1=tip1|tip2|tip3 <br>
        SERIE_POINT_1=true</p>
    </td>
    <td width="26%" valign="top" height="184"> 
      <p><font color="#3333FF">Activate tips<br>
        Look of the tips, background color<br>
        Font color<br>
        Font <br>
        Tips for first, second and third values.<br>
        Points must be active for linecharts</font></p>
    </td>
    <td width="44%" valign="top" height="184"> 
      <div align="left"> 
        <p>chart.showTips=true;<br>
          chart.tipColor=GraphicsProvider.getColor(255,255,255);<br>
          chart.tipFontColor=GraphicsProvider.getColor(0x40,0x40,0x40);<br>
          chart.tipFont = GraphicsProvider.getFont( "Arial", ChartFont.ITALIC, 
          10));<br>
          dataserie.tips=arrayOfTips; </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><br>
  <br>
  <img src="images/lineTip2.png" width="106" height="97"> </font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">In the same way, you can 
  also display tips in barcharts of in piecharts:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/barTips.png" width="101" height="116"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">There is a special kind 
  of tip which always displays the current position of the cursor according to 
  the Y scale:</font></p>
<table width="100%" border="0" height="75">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC" height="26"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC" height="26"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC" height="26"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="39"> 
      <p>CHART_SHOW_POSITION=TRUE </p>
    </td>
    <td width="26%" valign="top" height="39"> 
      <p><font color="#3333FF">Activate position tips </font></p>
    </td>
    <td width="44%" valign="top" height="39"> 
      <div align="left"> 
        <p>chart.showPosition=true;</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1">In the screenshot you see 
  that the cursor was at position 15.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/showPossition.png" width="151" height="220"></font></p>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="3"></a>Actions 
  and drill down charts</font></h4>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">As explained in the previous 
  sections, the ChartListener can be used to know when the used clicks on a bar, 
  point or item. The following code will print a message in the java standard 
  output when the user clicks on a value (bar, point or item)</font></p>
<p><font face="Courier New, Courier, mono" size="-1">chart.activateSelection=true;<br>
  chart.addChartListener( new ChartAdapter() {<br>
  public void chartEvent(Chart chart,int type) { <br>
  // process event here<br>
  if (type==ChartListener.EVENT_POINT_CLICKED) <br>
  System.out.println(&quot;Point clicked &quot; + chart.selectedSerie.name + &quot; 
  &quot;+ chart.selectedSeriePoint);<br>
  <br>
  }<br>
  </font><font face="Courier New, Courier, mono" size="-1">});</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The EVENT_POINT_CLICKED 
  event is commounly used for implementing drill down charts. The following example 
  shows how this can be achieved.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">You create a main chart 
  using the following parameters:</font></p>
<p><font size="-1" face="Arial, Helvetica, sans-serif">TITLECHART=Sales <br>
  LEGEND=TRUE<br>
  SERIE_1=Pie<br>
  SERIE_TYPE_1=PIE<br>
  PIE_STYLE_1=RED<br>
  PIE_STYLE_2=BLUE<br>
  PIE_STYLE_3=GREEN<br>
  PIE_NAME_1=Products<br>
  PIE_NAME_2=Services<br>
  PIE_NAME_3=Other<br>
  PIE_LABEL_FORMAT=#VALUE# (#PERCENTAGE#)<br>
  SERIE_DATA_1=94|48|28<br>
  SERIE_FONT_1=ARIAL|BOLD|12<br>
  SERIE_LABELS_1=Products|Services|Other<br>
  SERIE_TIPS_1=Click to see PRODUCT \nsales by continent|Click to see SERVICES 
  \nsales by continent|Click to see OTHER \nsales by continent<br>
  CHART_SHOW_TIPS=true <br>
  CHART_POINT_SELECTION=true <br>
  SERIE_TOGETHER_1=true|false|true<br>
  CHART_BORDER=0.2|BLACK|LINE<br>
  CHART_FILL=LIGHTGRAY<br>
  LEGEND_BORDER=0.2|BLACK|LINE<br>
  LEGEND_VERTICAL=false<br>
  LEGEND_POSITION=TOP<br>
  LEGEND_FILL=WHITE<br>
  PIECHART_3D=true<br>
  BACK_IMAGE=back19.jpg<br>
  </font></p>
<blockquote>
  <blockquote>&nbsp;</blockquote>
</blockquote>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The result is:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/drilldown1.png" width="253" height="197"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"> Each point ,bar or slice 
  of your chart will have an associated sub-chart which must be loaded when the 
  user clicks on the item. The Java code to do this would be something like:</font></p>
<p><font face="Courier New, Courier, mono" size="-1">chart.activateSelection=true;<br>
  chart.addChartListener( new ChartAdapter() {<br>
  public void chartEvent(Chart chart,int type) {</font> </p>
<blockquote>
<p><font face="Courier New, Courier, mono" size="-1"><br>
    // process event here<br>
    if (type==ChartListener.EVENT_POINT_CLICKED) {</font></p>
  <blockquote>
<p><font face="Courier New, Courier, mono" size="-1">// load definition of 
      subchart<br>
      if (chart.selectedSeriePoint==0) myChartLoader.loadFromFile(&quot;subchart1&quot;,true); 
      <br>
      elseif (chart.selectedSeriePoint==1) myChartLoader.loadFromFile(&quot;subchart2&quot;,true); 
      <br>
      elseif (chart.selectedSeriePoint==2) myChartLoader.loadFromFile(&quot;subchart3&quot;,true); 
      <br>
      // rebuild chart<br>
      myChartLoader.build(chart,false,false);<br>
      // repaint chart on the window<br>
      myChartViewer.redraw(); </font></p>
  </blockquote>
</blockquote>
<p><font face="Courier New, Courier, mono" size="-1">}<br>
  <br>
  }<br>
  </font><font face="Courier New, Courier, mono" size="-1">});</font></p>
<p><font size="-1" face="Arial, Helvetica, sans-serif"></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">That function will then 
  load the new chart from one of the data files subchart1, subchart2 or subchart3 
  depending on the slice the users clicked on.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The content of subchart1 
  can be:</font></p>
<p></p>
<p></p>
<blockquote> 
  <blockquote> 
    <p><font size="-1" face="Arial, Helvetica, sans-serif">TITLECHART=Sales Products<br>
      LEGEND=TRUE<br>
      SERIE_1=Pie<br>
      SERIE_TYPE_1=PIE<br>
      PIE_STYLE_1=RED<br>
      PIE_STYLE_2=BLUE<br>
      PIE_STYLE_3=GREEN<br>
      PIE_STYLE_4=YELLOW<br>
      PIE_NAME_1=America<br>
      PIE_NAME_2=Europe<br>
      PIE_NAME_3=Asia<br>
      PIE_NAME_4=Other<br>
      PIE_LABEL_FORMAT=#VALUE# (#PERCENTAGE#)<br>
      SERIE_DATA_1=14|48|28|78<br>
      SERIE_FONT_1=ARIAL|BOLD|12<br>
      SERIE_LABELS_1=America|Europe|Asia|Other<br>
      CHART_BORDER=0.2|BLACK|LINE<br>
      CHART_FILL=LIGHTGRAY<br>
      LEGEND_BORDER=0.2|BLACK|LINE<br>
      LEGEND_VERTICAL=false<br>
      LEGEND_POSITION=TOP<br>
      LEGEND_FILL=WHITE<br>
      PIECHART_3D=true<br>
      BACK_IMAGE=back19.jpg<br>
      CHART_JAVASCRIPT_EVENTS=false<br>
      SERIE_TIPS_1=America|Europe|Asia|Other<br>
      CHART_SHOW_TIPS=true</font></p>
    <p>&nbsp;</p>
  </blockquote>
</blockquote>
<p><font face="Arial, Helvetica, sans-serif" size="-1">When the user click on 
  the red slice, the following subchart will be loaded:<br>
  </font></p>
<p>&nbsp; </p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/drilldown2.png" width="283" height="236"></font></p>
<h4>&nbsp;</h4>
<hr>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
